define([
    'MVC',
    'jquery',
    'css!./header.css'
], function(MVC, $) {

    MVC.addView('header', function(M) {
        let $dom = $('<div class="header"></div>');
        let data = M.get('header')
            // console.log(data.icon);

        let nav_icon = data.icon.map(item => {
            return `
                <li><a href="${item.href}"><img src="${item.img}" alt=""></a></li>
            `
        }).join('');
        // console.log(data);
        // 定义方法
        function renderData(list) {
            // 遍历数据
            return list.map(item => {
                // 返回结构
                return `
                    <li>
                        <a href="${item.href}">${item.title}</a>
                    </li>
                `
            }).join('')
        }
        let nav_bd = data.nav.map(item => {
            let nav_bd_no = item.list ? `<ul class="nav_bd_no">${renderData(item.list)}</ul>` : '';
            return `
                <li class="li_item">
                <a href="${item.href}">${item.title}</a>
                ${nav_bd_no}
                </li>
            `
        }).join('')

        // 定义模板
        let html = ``;
        html += `
            <div class="nav_hd">
            <div><img src="${data.logo}" class="logo"></div>
                <ul class="nav_hd_ul">${nav_icon}</ul>
            </div>
            <ul class="nav_bd">${nav_bd}</ul>
        `;

        $('#app').append($dom.append(html))

        return $dom
    })


    MVC.addCtrl('header', function(M, V) {
        $.get('/web/data/header.json', res => {
            // 添加数据
            M.add('header', res)

            let $dom = V.render('header');
            // console.log($dom);
            let li_item = $dom.find('.li_item');
            // 绑定事件
            li_item.mouseenter(function() {
                $(this).children('.nav_bd_no').stop(true).slideDown();
            });

            li_item.mouseleave(function() {
                $(this).children('.nav_bd_no').stop(true).slideUp();
            })

        });
    })
});